<template>
  <div class="unit-out-consume">
    <div class="unit-out-consume-left">
      <columnBord :title="bordTitle" :dataList="dataList" :width="328" :height="650" />
    </div>
    <div class="unit-out-consume-right">
      <linesCharts :key="tablePieKey" title="趋势图" :height="650" :options="trendOptions" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, computed, markRaw, getCurrentInstance } from "vue";
import columnBord from "./columnBord.vue";
import linesCharts from "./linesCharts.vue";
import type { UtilsEChartsOption } from "@pureadmin/utils";
import { viewSystemTotal } from "@/api/energy/consumeCost";

interface Props {
  system?: string;
  activeName?: string;
  queryData?: Object | null;
}

interface Emits {
  (event: "request-data"): void;
}

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

const emits = defineEmits<Emits>();

const tablePieKey = ref(Date.now());

const props = withDefaults(defineProps<Props>(), {
  system: "系统",
  activeName: ""
});

const bordTitle = ref("单位产量能耗费用");

const dataList = ref<any>([]);

const tableList = [
  {
    name: "电",
    label: "electricity",
    icon: "icon_electricity",
    unit: "kwh"
  },
  {
    name: "水",
    label: "water",
    icon: "icon_water",
    unit: "m³"
  },
  {
    name: "天然气",
    label: "ng",
    icon: "icon_ng",
    unit: "Nm³"
  },
  {
    name: "蒸汽",
    label: "steam",
    icon: "icon_steam",
    unit: "t"
  },
  {
    name: "热水",
    label: "hot",
    icon: "icon_hot",
    unit: "t"
  },
  {
    name: "大宗气",
    label: "gas",
    icon: "icon_gas",
    unit: "Nm³"
  },
  {
    name: "总费用",
    label: "all",
    icon: "icon_cost",
    unit: "万元"
  }
];

const trendOptions = ref<any>({});

const requestData = ref<any>({});

const getPageData = async val => {
  const param = Object.assign({}, val);
  const res: any = await viewSystemTotal(param);
  let resData: any =
    (res.costTable &&
      res?.costTable.map(item => {
        return {
          name: tableList.find(el => el.label === item.kind).name,
          icon: tableList.find(el => el.label === item.kind).icon,
          unit: tableList.find(el => el.label === item.kind).unit,
          ...item
        };
      })) ||
    [];
  if (res.cost !== null && res.cost !== undefined) {
    resData.push({
      name: "总费用",
      icon: "icon_cost",
      unit: "万元",
      cost: res.cost,
      costYoy: res.costYoy,
      costMom: res.costMom
    });
  }
  console.log(resData, "******************");
  dataList.value = resData || [];
  // [
  //   {
  //     name: "电",
  //     label: "electricity",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_electricity",
  //     unit: "kwh"
  //   },
  //   {
  //     name: "水",
  //     label: "water",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Math.floor(Math.random() * -100),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_water",
  //     unit: "m³"
  //   },
  //   {
  //     name: "天然气",
  //     label: "ng",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Math.floor(Math.random() * -100),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_ng",
  //     unit: "Nm³"
  //   },
  //   {
  //     name: "蒸汽",
  //     label: "steam",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_steam",
  //     unit: "t"
  //   },
  //   {
  //     name: "热水",
  //     label: "hot",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Math.floor(Math.random() * -100),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_hot",
  //     unit: "t"
  //   },
  //   {
  //     name: "大宗气",
  //     label: "gas",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_gas",
  //     unit: "Nm³"
  //   },
  //   {
  //     name: "总费用",
  //     label: "all",
  //     cost: Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2)),
  //     costYoy: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     costMom: Number(Math.floor(Math.random() * 100).toFixed(2)),
  //     icon: "icon_cost",
  //     unit: "万元"
  //   }
  // ];
  requestData.value = res;
  const obj: any = res;
  let seriesArr = [];
  let yaxisArr = [];
  const xData = obj.costTrend ? obj.costTrend.xaxis : [];
  if (obj.costTrend && obj.costTrend.yaxis && obj.costTrend.yaxis.length > 0) {
    obj.costTrend.yaxis.forEach((item, index) => {
      seriesArr.push({
        name: item.name,
        type: "line",
        yAxisIndex: index,
        data: item.value.map(e => {
          return Number(Number(e).toFixed(2));
        }),
        emphasis: {
          focus: "series"
        }
      });
      yaxisArr.push({
        type: "value",
        name: `${item.name}\n万元`,
        alignTicks: true,
        offset: index * 70,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1
          }
        }
      });
    });
  }
  trendOptions.value = labelLayoutTrendFn(xData, seriesArr, yaxisArr);
  tablePieKey.value = Date.now();
};

const labelLayoutTrendFn = (xData: any, seriesArr: Array<dataType>, yaxisArr: any) => {
  const options: UtilsEChartsOption = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      type: "scroll", // 设置图例分页类型为滚动
      icon: "rect",
      orient: "horizontal", // 水平排列
      right: "center", // 水平居中
      itemWidth: 20, // 图例标记的图形宽度
      itemHeight: 10, // 图例标记的图形高度
      selected: {},
      data: seriesArr.map(e => e.name) || []
    },
    grid: {
      left: "24px",
      right: `${yaxisArr.length * 50}px`,
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: xData || []
    },
    yAxis: yaxisArr || [],
    series: seriesArr || []
  };
  return options;
};

watch(
  () => props,
  val => {
    console.log(val);
    getPageData(props.queryData);
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.unit-out-consume {
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
  min-width: 1300px;
  height: calc(100% - 136px);

  .unit-out-consume-left {
    width: 350px;
    height: 100%;
  }

  .unit-out-consume-right {
    flex: 1;
    height: 650px;
  }
}
</style>
